<template>
    <div class="toolBox">
        <div class="centerBox">
            <h2>最新工具
                {{nowActiveToolIndex}}
            </h2>
            <div class="latestToolBox">
                <div class="latestTool mr20" v-for="(item,index) in 10" :key="index">
                    <div class="toolDescription" >
                        <div class="toolLeft">
                            <img class="logo" src="@/assets/images/profile.jpg" alt="donate" width="100%" />
                        </div>
                        <div class="toolRight">
                            <div class="t_title">抖音生成小红书</div>
                            <div class="intro">Gitee 代码托管·协作开发平台，企业级代码托管、项目管理服务。</div>
                            <!-- <div class="tags">标签：<em>Git</em>, <em>代码托管</em>, <em>项目管理</em></div> -->
                        </div>
                    </div>
                    <!-- <div class="detail boxShadow" id="gitee_detail" v-show="nowActiveToolIndex===index">
                        <div><a href="https://gitee.com?from=osctools"><img src="/img/logo/gitee_new.png" alt="gitee" width="96" class="ToolLogo"></a>
                        </div>
                        <div class="t_title"><a href="https://gitee.com?from=osctools">Gitee</a></div>
                        <div class="detailIntro">Gitee 代码托管·协作开发平台，汇聚几乎所有本土原创开源项目，提供企业级代码托管、项目管理服务。</div>
                        <div class="detailTags">标签：<em>Git</em>, <em>代码托管</em>, <em>项目管理</em></div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
        }
    },
    methods: {
        
    }
}
</script>


<style scoped lang="scss">
.toolBox {
    width: 100%;
    .centerBox {
        width: 1100px;
        margin: 0 auto;
        padding: 30px 0;
        .latestToolBox {
            overflow: hidden;
            .latestTool {
                width: calc((100% / 2) - 20px);
                margin: 10px;
                float: left;
                padding: 12px;
                background-color: #f5fcff;
                position: relative;
                z-index: 1;
                .toolDescription {
                    display: flex;
                    justify-content: space-between;
                    .toolLeft {
                        img {
                            width: 100px;
                            height: 100px;
                        }
                    }
                    .toolRight {
                        width: calc(100% - 110px);
                        .t_title {
                            font-size: 20px;
                            overflow: hidden;
                            /* 文本超出时，显示省略标记 */
                            text-overflow: ellipsis;
                            /* 弹性伸缩盒子模型 */
                            display: -webkit-box;
                            /* 子元素呈现3行 */
                            -webkit-line-clamp: 1;
                            /* 子元素排列方式为垂直 */
                            -webkit-box-orient: vertical;
                        }
                        .intro {
                            color: #666;
                            margin-top: 5px;
                            font-size: 14px;
                            overflow: hidden;
                            /* 文本超出时，显示省略标记 */
                            text-overflow: ellipsis;
                            /* 弹性伸缩盒子模型 */
                            display: -webkit-box;
                            /* 子元素呈现3行 */
                            -webkit-line-clamp: 2;
                            /* 子元素排列方式为垂直 */
                            -webkit-box-orient: vertical;
                        }
                    }
                }
                .detail{
                    background-color: aqua;
                    // display: flex;
                    position: absolute;
                    z-index: 10;
                    top: 0;
                }
            }
        }
    }
}
</style>